import React from 'react';
import {inject, observer} from 'mobx-react';
import {Table} from 'antd';
import {
  WeaCheckbox,
  WeaSearchGroup,
  WeaFormItem,
  WeaInputNumber,
  WeaSelect,
  WeaLocaleProvider
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS
@inject ('planBaseStore')
@observer
export default class DateSearchGroup extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      columns: [
        {
          title: getLabel('500401','类型') ,
          dataIndex: 'cate',
          width: '10%',
        },
        {
          title: getLabel('500371','开始时间') ,
          dataIndex: 'beginDate',
          width: '40%',
        },
        {
          title: getLabel('502374','截止时间') ,
          dataIndex: 'endDate',
          width: '40%',
        },
        {
          title: getLabel('6078','是否提醒') ,
          dataIndex: 'remind',
          width: '10%',
        },
      ],
    };
    this.store = this.props.planBaseStore;
  }

  componentWillMount () {
    this.store.getOption()
  }

  onCycleCheckBox = (paramName, v) => {
    this.store.setFormParams (paramName, v);
    this.getConfigTableData ();
  };

  getConfigTableData = () => {
    let {formParams} = this.store;
    let tableDatas = [];
    if (formParams.isweek && parseInt (formParams.isweek) != 0) {
      tableDatas.push (
        this.getDateTableData (
          getLabel('20619','周报') ,
          'wstarttype',
          'wstartdays',
          'wendtype',
          'wenddays',
          'iswremind'
        )
      );
    }
    if (formParams.ismonth && parseInt (formParams.ismonth) != 0) {
      tableDatas.push (
        this.getDateTableData (
          getLabel('20617','月报') ,
          'mstarttype',
          'mstartdays',
          'mendtype',
          'menddays',
          'ismremind'
        )
      );
    }
    return tableDatas;
  };

  //获取日期表格数据
  getDateTableData = (
    cate,
    startType,
    startDays,
    endType,
    endDays,
    isRemind
  ) => {
    let {formParams,canedit,frontOrBackOptions,frontOrBackMap} = this.store;
    return {
      cate: cate,
      beginDate: (
        <div className="date-display">
          {getLabel('405','结束') }
          {canedit?<span><WeaSelect
            options={toJS(frontOrBackOptions)}
            value={formParams[startType]}
            viewAttr={canedit ? 2 : 1}
            style={{display: 'inline-block', width: 80, margin: '0 5px'}}
            onChange={(v, showname) => {
              formParams[startType] = Number(v);
            }}
          /><WeaInputNumber
          viewAttr={canedit ? 2 : 1}
          style={{display: 'inline-block', width: 80}}
          value={formParams[startDays]}
          onChange={e => {
            formParams[startDays] = e;
          }}
        /></span>:frontOrBackMap[formParams[startType]]+""+formParams[startDays]
          }
          {getLabel('1925','天') }

        </div>
      ),
      endDate: (
        <div>
          {getLabel('405','结束')  }
          {canedit?<span>
            <WeaSelect
            options={toJS(frontOrBackOptions)}
            value={formParams[endType]}
            viewAttr={canedit ? 2 : 1}
            style={{display: 'inline-block', width: 80, margin: '0 5px'}}
            onChange={(v, showname) => {
              formParams[endType] = Number(v);
            }}
          />
          <WeaInputNumber
            viewAttr={canedit ? 2 : 1}
            style={{display: 'inline-block', width: 80}}
            value={formParams[endDays]}
            onChange={e => {
              formParams[endDays] = e;
            }}
          />
          </span>:frontOrBackMap[formParams[endType]]+""+formParams[endDays]}
          {getLabel('1925','天') }

        </div>
      ),
      remind: (
        <WeaCheckbox
          value={formParams[isRemind]}
          viewAttr={canedit ? 2 : 1}
          display="switch"
          style={{display: 'inline-block'}}
          onChange={e => {
            formParams[isRemind] = e;
          }}
        />
      ),
    };
  };

  getCycleCheckBox = (
    v,
    display,
    id,
    className,
    title,
    paramName
  ) => {
    const {canedit} = this.store;
    return (
      <div style={{display: 'inline'}}>
        <WeaCheckbox
          viewAttr={canedit ? 2 : 1}
          value={v}
          display={display}
          id={id}
          className={className}
          onChange={e => {
            this.onCycleCheckBox (paramName, e);
          }}
        />
        <span>{title}</span>
      </div>
    );
  };

  getCycleCheckBoxConfig = () => {
    const {planBaseStore} = this.props;
    const {formParams} = planBaseStore;
    return [
      {
        v: formParams.isweek,
        display: 'switch',
        id: 'week',
        className: 'cycle-check-box-week',
        title: getLabel('20619','周报') ,
        paramName: 'isweek',
      },
      {
        v: formParams.ismonth,
        display: 'switch',
        id: 'month',
        className: 'cycle-check-box-month',
        title: getLabel('20617','月报'),
        paramName: 'ismonth',
      },
    ];
  };

  render () {
    let {columns} = this.state;
    const cycleCheckBoxs = this.getCycleCheckBoxConfig ();
    return (
      <div>
        <WeaSearchGroup title={getLabel('508935','报告起止日期') } showGroup={true}>
        <div className="workrelate-plan-base-div">
          <WeaFormItem
            label={getLabel('508938','启用报告周期') }
            labelCol={{span: 3}}
            wrapperCol={{span: 20}}
          >
            {cycleCheckBoxs.map ((v, i) => {
              return this.getCycleCheckBox (
                v.v,
                v.display,
                v.id,
                v.className,
                v.title,
                v.paramName
              );
            })}
          </WeaFormItem>
          <WeaFormItem label="" labelCol={{span: 0}} wrapperCol={{span: 24}}>
            <Table
              columns={columns}
              bordered={true}
              dataSource={this.getConfigTableData ()}
              pagination={false}
            />
          </WeaFormItem>
          </div>
        </WeaSearchGroup>
      </div>
    );
  }
}
